<template>
  <div class="chart-selector">
    <div class="selector">
      <div class="dot" @click="handleRadioClick()">
        <div class="dot-unselected" v-show="currentChoice !== name">
        </div>
        <div class="circle" :class="color" v-show="currentChoice == name">
          <div class="dot-in" :class="color"></div>
        </div>
      </div>
      <div class="title">{{name}}</div>
      <div class="amount" :class="color">
        <slot>1234567</slot>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    currentChoice: {
      type: String,
      default: ''
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: 'red'
    }
  },
  methods: {
    handleRadioClick() {
      this.$emit('click', this.name)
    }
  },
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .chart-selector
    display flex
    .selector 
      display flex
      align-items center
      margin-right 30px
      .dot 
        position relative 
        width 16px 
        height 16px 
        margin-right 5px
        .dot-unselected 
          width 16px 
          height 16px 
          border-radius 50% 
          border 1px solid #dcd4d4 
          box-sizing border-box
          background linear-gradient(180deg, #dcd4d4, #f2f1f1)
          position absolute 
          top 0
          left 0
          right 0
          bottom 0
        .circle 
          width 16px 
          height 16px 
          border-radius 50% 
          box-sizing border-box 
          
          position absolute 
          top: 0
          right 0
          bottom 0
          left 0
          &.red 
            border 1px solid $color-theme-red 
          &.green 
            border 1px solid $color-primary-green  
          .dot-in 
            width 10px 
            height 10px 
            border-radius 50% 
            box-sizing border-box 
            position absolute 
            top 50% 
            left 50%
            transform translate(-50%, -50%)
            &.red 
              background $color-theme-red 
            &.green 
              background $color-primary-green
      .amount 
        margin-left 5px
        &.red 
          color $color-theme-red 
        &.green 
          color $color-primary-green 


</style>